<template :style="dataTable">
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item label="bug名称">
					<el-input v-model="params.input" placeholder="请输入bug名称"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="serBtn()">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button :type="params.mode === 3 ? 'success':'primary'" plain @click="stuPro(3)">全部</el-button>
				</el-form-item>
				<el-form-item>
					<el-button :type="params.mode === 1 ? 'success':'primary'" plain @click="stuPro(1)">未完成</el-button>
				</el-form-item>
				<el-form-item>
					<el-button :type="params.mode === 2 ? 'success':'primary'" plain @click="stuPro(2)">已完成</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :height=heightData   :data="dataList"  border header-align="center"  :row-class-name="tableRowClassName" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="index" align="center" width="50">
			</el-table-column>
			<el-table-column prop="name" label="bug名称" align="center" >
			</el-table-column>
			<el-table-column prop="topProjName" label="项目名称" align="center" >
			</el-table-column>
			<el-table-column prop="secondProjName" label="模块名称"  align="center" >
			</el-table-column>
			<el-table-column prop="thirdProjName" label="三级名称"  align="center" >
			</el-table-column>
			<el-table-column prop="issuer" label="创建人员"  align="center" >
			</el-table-column>
			<el-table-column prop="ownerId" label="负责人员"  align="center" >
			</el-table-column>
			<el-table-column prop="tester" label="测试人员"  align="center" >
			</el-table-column>
			<el-table-column prop="bugLevel" label="bug等级"  align="center" >
				<template slot-scope="scope">
					<p v-if="scope.row.bugLevel === 0" style="color:#fff; background: #b71717">致命</p>
					<p v-if="scope.row.bugLevel === 1" style="color:#423737; background:#e2a8a8">严重</p>
					<p v-if="scope.row.bugLevel === 2" style="color:#423737;background: #a8c6e2;">一般</p>
					<p v-if="scope.row.bugLevel === 3" style="color:#423737; background: #a8e2e0">轻微</p>
				</template>
			</el-table-column>
			<el-table-column prop="bugStatus" label="bug状态"  align="center" >
				<template slot-scope="scope">
					<p v-if="scope.row.bugStatus === 0" style="color: #5b72a7">已对应</p>
					<p v-if="scope.row.bugStatus === 1" style="color: #32b3ae">测试通过</p>
					<p v-if="scope.row.bugStatus === 2" style="color: #a8c6e2">新建bug</p>
					<p v-if="scope.row.bugStatus === 3" style="color: #e81212">测试未通过</p>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间"  align="center" >
			</el-table-column>
			<el-table-column prop="closeDay" label="关闭时间"  align="center" >
			</el-table-column>
			<el-table-column label="操作" min-width="200" width="180" align="center">
				<template scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button size="small" v-if="scope.row.status == 1" type="primary" @click="closeBtn(scope.$index, scope.row,'reopenBug','开启')">开启</el-button>
					<el-button size="small" v-if="scope.row.status == 0" type="danger" @click="closeBtn(scope.$index, scope.row,'closeBug','关闭')">关闭</el-button>
					<el-button type="warning" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" style="margin: 10px 0px">
			<!--<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>-->
			<el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="params.page"   :page-sizes="[5,10, 20, 30, 40,50,200]"
							:page-size="params.pageSize"  layout="total, sizes, prev, pager, next, jumper" :total="totalRecord" style="float:right;">
			</el-pagination>
		</el-col>
	</section>
</template>

<script>
    import util from '../../common/js/util'
    import insurance from '../../api/insurance';
    import { getUserListPage, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api';

    export default {
        data() {
            return {
                params: {
                    input:'',	 // bug名称
                    page: 1,     //  当前页
                    pageSize: 10,    //  每页行数
                    usrID:99,
                    mode:1,
                },
                userList:[],
                totalRecord:0,  //  总记录数
                filters:{'name':''},
                dataList:[],
                total: 0,
                page: 1,
                listLoading: false,
                sels: [],//列表选中列

                heightData: document.body.clientHeight-200,
                dataTable:document.body.clientHeight-200,
            }
        },
        methods: {
            userPro(num){
                this.params.mode = num;
                this.getProList(num);
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            // 项目完成状态
            stuPro(stu){
                this.params.mode = stu;
                this.getProList(this.params.mode);     // 调用公共列表方法
            },
            // 我的项目
            userPro(uid){
                if(uid != 99){
                    this.params.usrID = JSON.parse(sessionStorage.getItem('user')).id;
                }else{
                    this.params.usrID = uid;
                }
                this.getProList(this.params.mode);     // 调用公共列表方法
            },
            // 查询
            serBtn(){
                this.getProList(this.params.mode);     // 调用公共列表方法
            },
            //  每页行数 选择事件
            handleSizeChange(val) {
                this.params.pageSize = val;        // 分页参数 每页行数 （赋值全局变量）
                this.getProList(this.params.mode);  // 调用公共列表方法
            },

            // 当前页数 点击事件
            handleCurrentChange(val) {
                this.params.page  = val;    // 分页参数 当前页数 （赋值全局变量）
                this.getProList(this.params.mode);     // 调用公共列表方法
            },
            //获取项目列表
            getProList(mode) {
                this.listLoading = true;
                var that = this;
                $.ajax(insurance.posturl+"bug/allBugs?page="+parseInt(that.params.page-1)+"&pageSize="+that.params.pageSize+"&mode="+mode+
					"&operator="+JSON.parse(sessionStorage.getItem('user')).id+'&input='+that.params.input,{
                    headers: {'Content-Type': 'application/json;charset=UTF-8'},
                    'type': 'GET',
                    success:function (res) {
                        res = JSON.parse(JSON.parse(res).Content);
                        that.totalRecord = res.count;
                        var data = [];
                        for(var i = 0; i<res.list.length; i++){
                            var d = {};
                            res.list[i].createTime = that.dateR(res.list[i].createTime);
                            for(var k = 0; k< that.userList.length; k++) {
                                if (res.list[i].ownerId === that.userList[k].key) {
                                    res.list[i].ownerId = that.userList[k].label;
                                }
                                if (res.list[i].tester === that.userList[k].key) {
                                    res.list[i].tester = that.userList[k].label;
                                }
                                if (res.list[i].issuer === that.userList[k].key) {
                                    res.list[i].issuer = that.userList[k].label;
                                }

                                d = res.list[i];
                            }
                        	data.push(d);
                        }
                        that.dataList = data;
                        that.listLoading = false;

                    }
                });
            },
            // 时间格式化 日 - 月
            dateR(d){
                var date = new Date(d);
                var month = parseInt(date.getMonth())+1;
                return date.getFullYear()+'-'+month+'-'+date.getDate()
            },

            //删除
            handleDel: function (index, row) {
                var that = this;
                that.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    that.listLoading = true;
                    $.ajax(insurance.posturl+"bug/deleteBug?bugID="+row.id+"&operator="+JSON.parse(sessionStorage.getItem('user')).id,{
                        headers: {'Content-Type': 'application/json;charset=UTF-8'},
                        'type': 'POST',
                        success:function (res) {
                            res = JSON.parse(res);
                            if( !res.isSuccess){
                                that.$message({ message:res.msg,type: 'success'});
                            }else{
                                that.$message({ message: '删除成功',type: 'success'});
                                that.getProList(that.params.mode);
                            }
                            that.listLoading = false;
                        }
                    });
                }).catch(() => {
                });
            },
            //	详情页跳转
            detail(index, row){
                location.reload();
                this.$router.push({path: '/Gantt3', query: {ID:row.ID}});
            },
            //显示编辑界面
            handleEdit: function (index, row) {
                this.$router.push({path: '/bugUpd', query: {ID:row.id,router:'proAll'}});
            },
            // 项目关闭
            closeBtn: function (index, row,isClose,name) {
                var that = this;
                that.$confirm('确认关闭该项目吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    that.listLoading = true;
                    $.ajax(insurance.posturl+"bug/"+isClose+"?bugID="+row.id+"&operator="+JSON.parse(sessionStorage.getItem('user')).id,{
                        headers: {'Content-Type': 'application/json;charset=UTF-8'},
                        'type': 'POST',
                        success:function (res) {
                            if(res === 'FAIL'){
                                that.$message({ message: name+'失败',type: 'success'});
                            }else{
                                that.$message({ message: name+'成功',type: 'success'});
                                that.getProList(that.params.mode);
                            }
                            that.listLoading = false;
                        }
                    });
                }).catch(() => {
                });
            },
            //显示新增界面
            handleAdd: function () {
                this.$router.push('/proAdd');
            },

            selsChange: function (sels) {
                this.sels = sels;
            },
            //批量删除
            batchRemove: function () {
                var ids = this.sels.map(item => item.id).toString();
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    //NProgress.start();
                    let para = { ids: ids };
                    batchRemoveUser(para).then((res) => {
                        this.listLoading = false;
                        //NProgress.done();
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.getProList(this.params.mode);
                    });
                }).catch(() => {

                });
            },
            // 获取用户列表
            getUser(){
                var that = this;
                $.ajax(insurance.posturl+"user/AllUsers?page=0&pageSize=200",{
                    headers: {'Content-Type': 'application/json;charset=UTF-8'},
                    'type': 'GET',
                    success:function (res) {
                        res = JSON.parse(JSON.parse(res).Content);
                        var data = [];
                        for(var i = 0; i<res.list.length; i++){
                            data.push({'key':res.list[i].id,'label':res.list[i].name})
                        }
                        that.userList = data;
                        var data3 = [];
                        for(var i = 0; i<res.list.length; i++){
                            data3.push({'key':res.list[i].id,'label':res.list[i].name});
                        }
                        window.localStorage.setItem('userList2', JSON.stringify(data3));
                    }
                });
            },
        },
        mounted() {
            this.getUser();
            var seconds = 1;
            var time = setInterval(() => {
                if (seconds > 1) {
                    seconds = seconds - 1;
                } else {
                    this.getProList(this.params.mode);
                    clearInterval(time);
                }
            },100);
        }
    }

</script>

<style>
	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}
</style>